<template>
  <el-dialog
    v-model="dialogVisible"
    title="挂号"
    :width="1100"
    :before-close="handleClose"
  >
    <div class="flex j-s-b">
      <s-table class="s-table" :data="table" :columns="columns"></s-table>
      <div class="charge">
        <div class="charge-item flex a-c j-s-b">
          <div class="item flex a-c">
            <span class="lable">票号：</span>
            <el-input class="input-auto" v-model="value"></el-input>
          </div>
          <div class="item flex a-c">
            <span class="lable">单据号：</span>
            <el-input v-model="value" :style="{ width: '80px' }"></el-input>
            <el-tag type="primary" style="margin: 0px 6px">退</el-tag>
            <el-tag type="primary">重</el-tag>
          </div>
        </div>
        <div class="charge-item flex a-c j-s-b">
          <div class="item flex a-c">
            <span class="lable">号别：</span>
            <el-input v-model="value" class="input-auto"></el-input>
          </div>
          <div class="item flex a-c">
            <span class="lable">序号：</span>
            <el-input v-model="value"></el-input>
          </div>
        </div>
        <div class="charge-item flex a-c j-s-b">
          <div class="item flex a-c">
            <span class="lable">科室：</span>
            <el-input v-model="value" class="input-auto"></el-input>
          </div>
          <div class="item flex a-c">
            <span class="lable">医生：</span>
            <el-input v-model="value"></el-input>
          </div>
        </div>
        <div class="charge-item flex a-c">
          <div class="item flex a-c j-s-b" style="width: 100%">
            <span class="lable">病人(姓)：</span>
            <div class="flex a-c j-s-b input-auto">
              <el-input v-model="value" class="input-auto"></el-input>
              <s-icon
                class="cu-p ml6 mr6"
                :icon="'icon-sousuo'"
                @click="search"
              ></s-icon>
              <s-icon
                class="cu-p mr6"
                :icon="'icon-faka'"
                @click="addCardVisible = true"
              ></s-icon>
              <!-- <s-icon class="cu-p mr6" :icon="'icon-guolv'"></s-icon> -->
              <el-tag type="primary">读卡</el-tag>
            </div>
          </div>
        </div>
        <div class="charge-item flex a-c">
          <div class="item flex a-c j-s-b" style="width: 100%">
            <span class="lable">性别：</span>
            <div class="flex a-c input-auto">
              <el-input v-model="value" class="input-auto"></el-input>
              <el-tag class="ml6" type="primary">医保</el-tag>
              <span class="lable-6">年龄：</span>
              <el-input
                v-model="age"
                style="width: 78px"
                placeholder="请输入"
              ></el-input>
              <s-select
                class="ml6"
                v-model="select"
                width="56px"
                :options="[]"
              ></s-select>
            </div>
          </div>
        </div>
        <div class="charge-item flex a-c">
          <div class="item flex a-c j-s-b" style="width: 100%">
            <span class="lable">出生日期：</span>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="日期"
              :size="size"
              class="input-auto"
            />
            <el-tag type="primary" class="ml6 mr6">生成年龄</el-tag>
            <el-tag type="primary">发卡</el-tag>
          </div>
        </div>
        <div class="charge-item flex a-c">
          <div class="item flex a-c" style="width: 100%">
            <span class="lable">地址：</span>
            <el-input v-model="value" class="input-auto"></el-input>
          </div>
        </div>
        <div class="charge-item flex a-c">
          <div class="item flex a-c">
            <span class="lable">方式：</span>
            <el-input v-model="value" class="input-auto"></el-input>
          </div>
          <div class="item flex a-c">
            <span class="lable">门诊号：</span>
            <el-input v-model="value" class="input-auto"></el-input>
          </div>
        </div>
        <div class="charge-item flex a-c">
          <div class="item flex a-c">
            <span class="lable">费别：</span>
            <el-input v-model="value" class="input-auto"></el-input>
          </div>
          <div class="item flex a-c">
            <span class="lable">结算方式：</span>
            <el-input v-model="value" class="input-auto"></el-input>
          </div>
        </div>
        <div class="pt6 mb6">
          <s-table :data="chargeTable" :columns="chargeColumns"></s-table>
        </div>

        <div class="mb12 el-icon-arrow-downflex j-s-b abstract">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="购买病历" value="0" />
            <el-checkbox label="卡费" value="1" />
            <el-checkbox label="免" value="2" />
          </el-checkbox-group>
          <s-select :label="'摘要'" :options="[]" labelWidth="47px"></s-select>
        </div>

        <el-card shadow="never" class="a-c">
          <div class="flex a-c">
            <div style="flex: 1" class="mr12">
              <div class="flex">
                <span class="sum"> 合 计 </span>
                <div class="price">6.66</div>
              </div>
            </div>
            <div style="flex: 1">
              <div class="item flex a-c mb6">
                <span class="price-label">应缴：</span>
                <el-input class="input-auto"></el-input>
              </div>
              <div class="item flex a-c mb6">
                <span class="price-label">缴款：</span>
                <el-input v-model="value" class="input-auto"></el-input>
              </div>
              <div class="item flex a-c mb6">
                <span class="price-label"> 找补：</span>
                <el-input v-model="value" class="input-auto"></el-input>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="isOk"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <searchUser v-model="searchVisible" />
  <addCard v-model="addCardVisible" />
</template>
<script setup lang="ts">
import { useDialog } from "@common/src/hooks/dialog.ts";
import { useTable } from "./registrationDialog.ts";
import addCard from "./components/addCard.vue";
import searchUser from "./components/searchUser.vue";
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    params?: Object;
  }>(),
  {
    modelValue: false,
    params: () => {},
  }
);
const value1 = ref("");
const checkList = reactive(["0"]);
const inputWidth = "90px";
const select = ref("");
const age = ref("");
const value = ref();
const searchVisible = ref(false);
const addCardVisible = ref(false);
const search = () => {
  searchVisible.value = true;
};
const emit = defineEmits(["update:modelValue"]);
const { handleClose, dialogVisible } = useDialog(props, emit);
const { columns, table, chargeColumns, chargeTable } = useTable();
</script>

<style lang="scss" scoped>
.s-table {
  width: 61%;
}
.charge {
  width: 38%;
  .charge-item {
    margin: 6px 0px;
  }
}
.abstract {
  align-items: flex-end;
}
.ml6 {
  margin-left: 6px;
}
.mr6 {
  margin-right: 6px;
}
.mb6 {
  margin-bottom: 6px;
}
.pt6 {
  padding-top: 6px;
}
.cu-p {
  cursor: pointer;
}
.lable-6 {
  width: 50px;
  text-align: right;
}
.item {
  .lable {
    width: 75px;
    text-align: right;
  }
}
.price-label {
  font-size: 20px;
}
.sum {
  width: 40px;
  font-size: 28px;
}
.price {
  font-size: 42px;
  display: flex;
  align-items: center;
  color: var(--theme-color);
}
.input-auto {
  flex: 1;
}
</style>
